﻿<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>O Básico</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="estilo.css">
        <!--        <style type="text/css">
                    
                                div {margin:50px}
                    div.menu{
                        position: fixed;
                        width:30%;
                        right:auto}
                    div.corpo{
                        position:absolute;
                        left: 30%;
                        width:60%;
                        right:3em;
                    }
                    table, td, tr{
                        width: 500px;
                        border:1px solid red;
                        alignment-baseline: central;
                    }
                </style>-->        
    </head>
    <body>
        <div class="menu">
            <a id="inicio"><h1>O BÁSICO</h1></a>
            <nav >
                <ul>
                    <li><a href="#11">1.1 PÁGINAS HTML</a></li>    
                    <li><a href="#12">1.2 TAGS</a></li>
                    <li><a href="#13">1.3 ESTRUTURA BÁSICA DO HTML</a></li>
                    <li><a href="#14">1.4 MARCAÇÕES BÁSICAS</a></li>
                    <li><a href="#141">1.4.1 TÍTULOS</a></li>
                    <li><a href="#142">1.4.2 CABEÇALHOS</a></li>
                    <li><a href="#143">1.4.3 PARÁGRAFOS</a></li>
                    <li><a href="#144">1.4.4 QUEBRAS DE LINHA</a></li>
                    <li><a href="#15">1.5 COMANDOS DE ESTILO</a></li>
                    <li><a href="#16">1.6 ALTERANDO A FONTE</a></li>
                    <li><a href="#17">1.7 CORES E PADRÕES DE FUNDO</a></li>
                    <li><a href="#18">1.8 OUTROS COMANDOS</a></li>
                    <li><a href="#181">1.8.1 TEXTOS PRÉ-FORMATADOS</a></li>
                    <li><a href="#182">1.8.2 CENTRALIZAÇÃO DE TEXTOS</a></li>
                    <li><a href="#183">1.8.3 LINHA DIVISÓRIA</a></li>
                    <li><a href="html.html">Menu Principal</a></li>
                </ul>
            </nav>
        </div>
        <div class="corpo">
            <p>
                <a id="11">1.1 PÁGINAS HTML </a>
            </p>
            <p>
                Uma home page, conhecida como página Web ou página HTML, é um 
                arquivo texto criado com um editor de textos qualquer, como o bloco 
                de notas e gravado com a extensão .HTM ou .HTML cujo conteúdo é 
                composto basicamente de textos e códigos especiais chamados tags que 
                possibilitam a exibição deste arquivo na Web (Word Wide Web) através 
                de um programa especial chamado navegador ou browser. Além de texto, 
                este documento pode conter referências para imagens, sons, animações 
                e até mesmo vídeos. Pode conter ligações ou links para outras 
                páginas armazenadas no micro ou em qualquer outro lugar da internet. 
                Uma página HTML é também conhecida como home page quando nos 
                referimos à pagina inicial ou principal de um site. 
            </p>
            <p>
                A linguagem HTML (Hiper Text Makup Language) é bastante simples e 
                tem como finalidade básica formatar o texto exibido e criar ligações 
                entre as páginas Web, criando assim documentos com o conceito de 
                hipertexto.
            </p>

            <a id="12">1.2 TAGS </a>
            <p>
                As tags normalmente são especificadas em pares, delimitando um texto 
                que sofrerá algum tipo de formatação. Mas existem várias tags 
                individuais que executam uma ação independente de um texto-alvo que 
                sofrerá formatação. As tags são identificadas por serem envolvidas 
                pelos sinais de menor e maior “&lt; &gt;”. Entre tais sinais são 
                especificados os comandos propriamente ditos. No caso de tags que 
                necessitam envolver um texto, a sua finalização deve ser feita 
                usando a barra de divisão /, indicando que a tag está finalizando a 
                marcação de um texto.
            </p>

            <a id="13">1.3 ESTRUTURA BÁSICA DO HTML </a>
            <p>
                Para que um navegador interprete corretamente o programa, ele deve 
                possuir alguns comandos básicos que sempre deverão estar presentes. 
                Um programa HTML possui três partes básicas: a estrutura principal, 
                o cabeçalho e o corpo do programa:
            </p>
            <p>
                &lt;html&gt; <br>
                &lt;head&gt;<br> 
                &lt;title&gt;Minha Primeira Página &lt;/title&gt; <br>
                &lt;/head&gt; <br>
                &lt;body&gt; <br>
                Já acabou !!!! <br>
                &lt;/body&gt; <br>
                &lt;/html&gt;</p>

            <a id="14">1.4 MARCAÇÕES BÁSICAS </a>
            <p>
                Em um editor de textos convencional, você insere uma quebra ou 
                avanço de linha toda vez que pressiona a tecla ENTER. Em um programa 
                HTML é necessário colocar um comando específico para que o navegador 
                entenda que você deseja mudar de linha, começar um novo parágrafo, 
                colocar o texto em negrito, etc.
            </p> 
            <p>
                Veremos agora algumas marcações tags básicas: 
            </p>
            <p>
                <a id="141">1.4.1 TÍTULOS </a>
            </p>
            <p>
                Esse é o texto que aparece na barra de título do seu navegador. 
                Fica dentro do cabeçalho no programa HTML.
            </p>
            <p>
                &lt;title&gt;Minha Primeira Página &lt;/title&gt;<br><br>
            </p>
            <p>
                <a id="142">1.4.2 CABEÇALHOS </a>
            </p>
            <p>
                "Cabeçalhos" normalmente são usados para títulos e sub-títulos de 
                uma página. Existem seis níveis de cabeçalhos, numerados de 1 a 6, 
                sendo o número 1 o de maior destaque. Cabeçalhos são exibidos em 
                letras maiores e em negrito. O comando para inserção do cabeçalho é 
                o &lt;hn&gt;, onde n pode ser um número de 1 a 6.O atributo align 
                pode assumir os valores center (centralizado), right (alinhado à 
                direita), left (alinhado à esquerda) e justify (alinhado pelas duas 
                margens): 
            </p>
            <p>
                &lt;Hn align = alinhamento&gt;Texto do Parágrafo&lt;/Hn&gt; 
            </p>
            <p>
                A tag &lt;META&gt; é um elemento da HTML que aparece no cabeçalho de um documento para definir o que está contido dentro dele. Isso parece complicado, mas é a pura verdade. &lt;MET&gt; identifica as meta-informações ou os dados sobre o conteúdo de um documento. 
                A tag quase sempre é usada pelos browsers e Web automata (bots, spiders, worms, wanderers...) para coletar informações sobre sites da Web. Os browsers usam essas informações para alterar seus displays, coletar dados estatísticos ou mesmo associar atividades a comandos. Entretanto, normalmente os robots do dispositivo de busca lêem as informações &lt;MET&gt; e as adicionam a seus bancos de dados. Quando os usuários executam pesquisas com consultas que coincidem com tais informações &lt;META&gt;, os resultados retornados são mais precisos e informativos. Em outas palavras, seu site passa a ser encontrado mais facilmente pelos sites de pesquisa. 
                Use a tag &lt;META&gt; nos seus documentos, mas não necessariamente em todas as páginas, basta que você use na home page, ou naquela que você gostaria que os usuários e os robots visitem com mais freqüência. 
                &lt;META&gt; não precisa ser fechado e deve aparecer na seção de cabeçalho. Existem apenas dois atributos, que são: 
                NAME - fornece meta informações sobre um nome exclusivo. 
                CONTENT - texto ou outros valores a serem associados com o NAME. 
                Veja alguns exemplos para &lt;META&gt;: 
            </p>
            <p>
                Use a seguinte construção para indicar a data de criação do documento: 
                &lt;META NAME="data_criação" CONTENT="dd mmm yyy hh:mm:ss GMT"&gt; 
            </p>
            <p>

                Use a seguinte construção para indicar a data em que o conteúdo expira, e que diz a um dispositivo de busca quando ele deve remover os documentos antigos de seu banco de dados e renovar essas informações: 
                &lt;META HTTP-EQUIV="expira" CONTENT="dd mmm yyy hh:mm:ss GMT"&gt; 
            </p>
            <p>

                Use a seguinte construção para fornecer palavras-chave para os dispositivos de busca além daquelas que são encontradas automaticamente pelos robots dentro do próprio documento: 
                &lt;META NAME="palavras-chave" CONTENT="palavra-chave_1, palavra-chave_2, palavra-chave_3"&gt; 
            </p>
            <p>

                Use a seguinte construção para fornecer um endereço de e-mail do autor ou responsável individual pelo documento: 
                &lt;META HTTP-EQUIV="responder para" CONTENT="bira@ireland.com"&gt; 
            </p>
            <p>

                Use a seguinte construção para indicar o nome do autor: 
                &lt;META NAME="autor" CONTENT="nome"&gt; 
            </p>
            <p>

                Use a seguinte construção para indicar o tipo de recurso do documento (os valores comuns incluem document, catalog, bibliography e new release): 
                &lt;META HTTP-EQUIV="tipo de recurso" CONTENT="document"&gt; 
            </p>
            <p>

                Use a seguinte construção para definir uma descrição a ser usada pelos dispositivos de busca que suportam essa tag: 
                &lt;META NAME="descrição" CONTENT="texto"&gt; 
            </p>
            <p>

                Use a seguinte construção para indicar o escopo ou alcance da distribuição ou aplicação de um documento (os valores comuns incluem global, domestic, local, ou private): 
                &lt;META HTTP-EQUIV="distribuição" CONTENT="global"&gt; 
            </p>
            <p>

                Use a seguinte construção para indicar o programa usado para gerar um documento, tal como o nome do editor de HTML usado: 
                &lt;META NAME="gerador" CONTENT="nome do programa"&gt; 
            </p>
            <p>

                Use a seguinte construção para indicar o detentor do copyright de um documento e a data: 
                &lt;META HTTP-EQUIV="copyright" CONTENT="nome @hy data"&gt; 
            </p>
            <p>

                Use a seguinte construção para forçar um documento a ser recarregado ou um documento novo carregar depois de um número específico de segundos: 
                &lt;META NAME="added" content="5; URL=..." http-equiv=refresh&gt; 
                Neste exemplo, "n" é o número de segundos que a página deve esperar antes de carregar a página seguinte, que está especificada na "URL". Importante não esquecer de separar os dois elementos por ponto-e-vírgula. 
            </p>

            <p>
                <a href="ex01.html">EX01.HTML</a>
            </p>
            <p>
                <a id="143">1.4.3 PARÁGRAFOS </a>
            </p>
            <p>
                A marcação &lt;p&gt; é utilizada para definir o início de um novo 
                parágrafo, deixando uma linha em branco entre cada parágrafo. A 
                linguagem HTML não reconhece o caracter de quebra de linha dos 
                editores de texto. Mesmo que exista uma linha em branco, os clientes 
                Web só reconhecem o início de um novo parágrafo mediante a marcação 
                apropriada. Podemos incluir o atributo align da mesma forma como 
                utilizado nos cabeçalhos.
            </p>
            <p>
                <a id="144">1.4.4 QUEBRAS DE LINHA </a>
            </p>
            <p>
                A marcação &lt;br/&gt; faz uma quebra de linha sem acrescentar 
                espaço extra entre as linhas. Veja a diferença do uso de &lt;p&gt; 
                e &lt;br&gt; no exemplo a seguir:
            </p>
            <p>
                <a href="ex02.html">EX02.HTML</a>
            </p>
            <p>
                <a id="15">1.5. COMANDOS DE ESTILO </a>
            </p>
            <p>
                Assim como no editor de textos, você pode criar uma série de efeitos 
                no texto, alterando a forma ou tipo de fonte. Todos os comandos que 
                alteram o estilo do texto são do tipo contêiner ou liga-desliga, ou 
                seja, precisam ser especificados em pares, marcando o início e o fim 
                do texto que sofrerá a formatação.
            </p>
            <p>
                <a href="ex03.html">EX03.HTML</a>
            </p>    
            <p>
                <a id="16">1.6. ALTERANDO A FONTE </a>
            </p>
            <p>
                Um dos recursos de tratamento do texto mais interessante da 
                linguagem HTML é a possibilidade de alterar o tamanho, cor e tipo 
                da fonte do texto utilizado. O comando responsável por isso é o 
                &lt;FONT&gt;, que também é do tipo contêiner: 
            </p>
            <p>
                &lt;font size = n face = nome1, nome2, nome3 color = cor&gt; &lt;/font&gt; 
            </p>
            <p>
                size: Este parâmetro especifica o tamanho da fonte utilizada. Os 
                valores permitidos vão de 1 a 7. O padrão é 3. Se for especificado 
                um número antecedido pelo sinal de adição ou de subtração, o 
                tamanho da fonte atual será aumentado ou diminuído naquele valor. 
                Por exemplo, se a fonte atual é 3 e for especificado &lt;font 
                size=+2&gt; o texto será exibido no tamanho 5. Note que esta 
                numeração funciona de forma contrária aos números usados nos 
                comandos de cabeçalho. Aqui, quanto menor o número, menor a fonte. 
            </p>
            <p>
                face: Este parâmetro permite que seja escolhida uma fonte diferente 
                para o texto. Podem ser especificadas várias fontes, de maneira que, 
                se o sistema não possuir a primeira opção, a segunda é carregada e 
                assim por diante. 
            </p>
            <p>
                color: Especifica a cor do texto. Seu valor pode ser especificado em 
                hexadecimal, RGB ou através de um nome predefinido de cores como 
                mostra a tabela: 
            </p>
            <table>
                <tr>
                    <td>RED 	#FF0000 </td>
                    <td>BLACK 	#000000 </td>
                    <td>FLUCHSIA    #FF00FF </td>
                </tr>
                <tr>
                    <td>GREEN 	#00FF00</td> 
                    <td>MAROON 	#800000</td> 
                    <td>BLUE 	#0000FF</td> 
                </tr>
                <tr>
                    <td>CYAN 	#00FFFF</td> 
                    <td>GRAY 	#C0C0C0</td> 
                    <td>LIME 	#32CD32</td> 
                </tr>
                <tr>
                    <td>NAVY 	#23238E</td> 
                    <td>WHITE 	#FFFFFF</td> 
                    <td>YELLOW 	#FFFF00</td> 
                </tr>
                <tr>
                    <td>SILVER 	#E6E8FA</td> 
                    <td>TEAL 	#008080</td> 
                    <td>OLIVE 	#808000</td> 
                </tr>
            </table>
            <p>
                <a href="ex04.html">EX04</a> 
            </p>
            <p>
                <a id="17">1.7. CORES E PADRÕES DE FUNDO </a>
            </p>
            <p>
                O mundo é colorido, não é? Então por que usar aquele fundo cinza ou 
                branco que aparece como padrão toda vez que a página é criada? A 
                maioria dos navegadores permite a utilização de cores no segundo 
                plano da tela (background) assim como a utilização de imagens que 
                podem ser utilizadas para enfeitar o fundo da tela. Vamos alterar os 
                parâmetros do comando &lt;body&gt;, responsável pelas cores da 
                página. 
            </p>
            <p>
                &lt;body bgcolor=#xxxxxx text = #xxxxxx link = #xxxxxx vlink = #xxxxxx&gt; 
            </p>
            <p>
                Onde xxxxxx deve ser substituído por um código que identifique a cor 
                desejada para aquele elemento. bgcolor é a cor do fundo, onde o 
                padrão é cinza ou branco. text é a cor do texto sendo que o padrão é 
                preto, link é a cor do texto do link, tendo como padrão o azul e 
                vlink é a cor do link visitado, padrão vermelho púrpura. 
            </p>
            <p>
                <a href="ex05.html">ex05</a>
            </p>

            <p>
                <a id="18">1.8. OUTROS COMANDOS </a>
            </p>
            <p>
                Além dos comandos de formatação apresentados, existem outros que 
                ajudam e melhoram a legibilidade do texto: 
            </p>
            <p>
                <a id="181">1.8.1 TEXTOS PRÉ-FORMATADOS </a>
            </p>
            <p>
                Através do comando &lt;pre&gt; você pode incluir um texto que foi 
                editado por um editor de textos e preservar a formatação original 
                do texto tais como marcas de tabulação, fim de linha gerado pela 
                tecla enter e outros formatos. A sintaxe geral é: 
            </p>

            &lt;PRE&gt; texto 
            ...texto 
            &lt;/PRE&gt;

            <p>
                <a id="182">1.8.2 CENTRALIZAÇÃO DE TEXTOS </a>
            </p>
            <p>
                Como padrão, os textos inseridos em uma página HTML são alinhados à 
                esquerda. Para centralizar um cabeçalho, parágrafo ou figura dentro 
                da largura da página deve ser usado o comando &lt;CENTER&gt;&lt;/CENTER&gt; 
            </p>
            <p>
                <a id="183">1.8.3 LINHA DIVISÓRIA </a>
            </p>
            <p>
                O comando &lt;hr&gt;> tem como finalidade inserir uma linha 
                divisória na posição em que foi especificado se ele for o único 
                comando da linha ou na linha seguinte caso esteja no meio de um 
                texto. Seu uso é recomendado para criar uma divisão na página, 
                separando tópicos e assuntos distintos. Pode-se utilizar os 
                atributos color, size e width. Este último designa qual a 
                porcentagem que a linha ocupará na tela. Esse comando não precisa 
                ser finalizado: 
            </p>
            <p>
            <hr color=red size=3 width=50%> 
            </p>
            <p>
                <a href="ex06.html">EX06</a> 
            </p>
            <h4 align="right"></h4>

        </div>
    </body>
</html>